import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  TouchableOpacity,
} from 'react-native';
import moment from 'moment';
import FontText from '../FontText';
import { scaleSize } from '../../../utils/screen';
import { CachedImage } from "react-native-img-cache";

class RewardItem extends Component {
  render() {
    const { reward, onEdit, onDelete } = this.props;
    const { last_updated, server_reward_id, image } = reward;
    const isLocalImage = image && !image.startsWith('http');
    const last_updated_ms = moment(last_updated).unix();

    return (
      <View>
        <View style={styles.rewardTitle}>
          <FontText font={'book'} style={styles.rewardTitleText}>{reward.title}</FontText>
        </View>
        <View style={styles.rewardImageBox}>
          {
            isLocalImage ?
            <Image
              style={styles.rewardImage}
              source={{uri: image}}
              defaultSource={ require("../../../access/imgs/reward.png") }
            /> :
            <CachedImage
              style={styles.rewardImage}
              source={{uri: `${image}?v=${last_updated_ms}`}}
              defaultSource={ require("../../../access/imgs/reward.png") }
            />
          }
        </View>
        <View style={styles.rewardPoint}>
            <FontText font={'book'} style={styles.rewardPointText}>{reward.take_points}</FontText>
            <FontText font={'book'} style={styles.rewardPointLabelText}>Point</FontText>
        </View>
        <View style={styles.rewardActionGroup}>
          <TouchableOpacity
            activeOpacity={0.8}
            style={styles.rewardEditButton}
            onPress={() => onEdit && onEdit(reward)}
          >
            <FontText font={'book'} style={styles.rewardButtonText}>Edit</FontText>
          </TouchableOpacity>
          <TouchableOpacity
            activeOpacity={0.8}
            style={styles.rewardDeleteButton}
            onPress={() => onDelete && onDelete(server_reward_id)}
          >
            <FontText font={'book'} style={styles.rewardButtonText}>Delete</FontText>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

/* StyleSheet =============================================================== */

const styles = StyleSheet.create({
  rewardTitle: {
    height: scaleSize(50),
    justifyContent: 'center',
  },
  rewardTitleText: {
    color:"#fff",
    fontSize: scaleSize(32),
  },
  rewardImageBox: {
    width: scaleSize(350),
    height: scaleSize(350),
    backgroundColor: "#151c2e",
  },
  rewardImage: {
    width: scaleSize(350),
    height: scaleSize(350),
  },
  rewardPoint: {
    flexDirection: 'row',
    height: scaleSize(90),
    alignItems: 'center',
  },
  rewardPointText: {
    color: "#cfa972",
    fontSize: scaleSize(42),
    paddingRight: scaleSize(9),
  },
  rewardPointLabelText: {
    color: "#fff",
    fontSize: scaleSize(32),
  },
  rewardActionGroup: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  rewardEditButton: {
    backgroundColor:"#c60046",
    width: scaleSize(170),
    justifyContent: 'center',
    alignItems: 'center',
    height: scaleSize(60),
  },
  rewardDeleteButton: {
    backgroundColor:"#394158",
    width: scaleSize(170),
    justifyContent: 'center',
    alignItems: 'center',
    height: scaleSize(60),
  },
  rewardButtonText: {
    color: "#fff",
    fontSize: scaleSize(28),
  },
});

export default RewardItem;